import {LitElement, html, css} from 'lit';
import {styleMap} from 'lit/directives/style-map.js';

function getPaddingBottom(value = '') {
  const [x, y] = value.split(':').map(Number)
  return `${(y / x) * 100}%`
}


class ZwDiv extends LitElement {
  constructor() {
    super();
  }
  static get styles() {
    return [
      css`
        :host {
          display: block;
        }
        #main {
        position: relative;
      }

        #main::before {
          display: block;
          content: "";
          width: 100%;
          padding-top: var(--zw-div-padding-bottom);
        }
        #main > div {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
        }
        
      `
    ]
  }
  render() {
    // console.log(this.aspect)
    let pb = getPaddingBottom(this.aspect)
    const styles = {
    };
    if (this.aspect) {
      styles['--zw-div-padding-bottom'] = pb
    }
    return html`<div id="main" style="${styleMap(styles)}"><div part="inner"><slot></slot></div></div>`
  }
}

ZwDiv.properties = {
  aspect: {type: String},
};

customElements.define('zw-div', ZwDiv)
